<template>
  <section style="text-align: left">
    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      width="450px"
      @close="clear">
      <el-form :model="customerForm" ref="customerForm" :rules="ruleValidate">
        <el-form-item label="名字" label-width="80px" prop="name">
          <el-input v-model="customerForm.name" placeholder="请输入真实姓名"/>
        </el-form-item>
        <el-form-item label="电话" label-width="80px" prop="phone">
          <el-input v-model="customerForm.phone" placeholder="请输入联系方式"/>
        </el-form-item>
        <el-form-item label="密码" label-width="80px" prop="password">
          <el-input v-model="customerForm.password" placeholder="请输入密码"/>
        </el-form-item>
        <el-form-item label="确认密码" label-width="80px" prop="againPassword">
          <el-input v-model="customerForm.againPassword" placeholder="请确认密码"/>
        </el-form-item>
      </el-form>
      <div slot="footer" style="margin-top: -30px" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onsubmit">确 定</el-button>
      </div>
    </el-dialog>
  </section>
</template>
<script>
import {validatePhone, validatePwd} from "../utils/validate";

export default {
  name: 'Register',
  data() {
    // 重复密码验证
    const pwdAgainCheck = async (rule, value, callback) => {
      if (value.length < 1) {
        this.changeAgainFlag = 2;
        return callback(new Error('重复密码不能为空！'));
      } else if (this.customerForm.password != this.customerForm.againPassword) {
        this.changeAgainFlag = 2;
        return callback(new Error('两次输入密码不一致！'));
      } else {
        this.changeAgainFlag = 1;
        callback()
      }
    };
    return {
      checked: true,
      customerForm: {
        name: '',
        phone: '',
        password: '',
        againPassword: ''
      },
      loading: false,
      dialogFormVisible: false,
      title: '',
      ruleValidate: {
        name: [
          {required: true, message: '姓名不能为空', trigger: 'blur'}
        ],
        phone: [
          {required: true, message: '请输入手机号', trigger: 'blur'},
          {max: 11, message: '手机号最多11位'},
          {validator: validatePhone, trigger: 'blur'}
        ],
        password: [
          {required: true, validator: validatePwd, trigger: 'blur'}
        ],
        againPassword: [
          {required: true, validator: pwdAgainCheck, trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    onsubmit() {
      this.$refs.customerForm.validate((valid) => {
        this.loading = true
        if (valid) {
          this.$axios.post("/customer/register", {
            name: this.customerForm.name,
            phone: this.customerForm.phone,
            password: this.customerForm.password
          }).then(resp => {
            if (resp.data.code === 400) {
              this.$message({
                message: resp.data.message,
                type: "warning"
              })
            }
            if (resp.data.code === 200) {
              this.$message({
                message: resp.data.message,
                type: "success",
                duration: 2000
              })
              this.dialogFormVisible = false
            }

          })
        }

      })
    },
    clear() {
    }
  }
}
</script>
<style>
#paper {
  background-position: center;
  height: 100%;
  width: 100%;
  background-size: cover;
  position: fixed;
}

body {
  margin: -5px 0px;
}

.login-container {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 90px auto;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}

.login_title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
</style>

